<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<style>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.wrap{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -130px;
		margin-left: -150px;
		text-align: center;
	}
	img{
		padding: 5px;
		border: 1px solid #ddd;
		display: none;
		width: 300px;
		height: 260px;
	}
	input{
		position: absolute;
		left: -99999px;
	}
	.banner{
		display: flex;
	}
	label{
		cursor: pointer;
		flex-grow: 1;
		border: 1px solid #ddd;
		margin-top: 5px;
	}
	input:checked + img{
		display: block;
	}
</style>
<body>

	<div class="wrap">
		<div class="box">
			<ul>
				<li>
					<input type="radio" name='img' id='img1' checked>
					<img src="1.jpg" alt="">
				</li>
				<li>
					<input type="radio" name='img' id='img2' >
					<img src="2.jpg" alt="">
				</li>
				<li>
					<input type="radio" name='img' id='img3' >
					<img src="3.jpg" alt="">
				</li>
			</ul>
		</div>
		<div class="banner">
			<label for="img1">第一张 </label>
			<label for="img2">第二张</label>
			<label for="img3">第三张</label>
		</div>
	</div>
</body>
</html>